<template>
	<view class="page">
		<u-navbar :autoBack="true" title='材料毛利' left-icon="arrow-left" leftIconColor='white' bg-color="transparent"
			titleStyle="color:white" :placeholder="true"></u-navbar>
		<view class="custom-navbar">
			<image src="../../static/BG.png" class="navbar-background">
				<view class="userInfo">
					<u-row justify="space-between" gutter="10">
						<u-col span="2">
							<image class="userPic" src="@/static/detailHd.png" mode=""></image>
						</u-col>
						<u-col span="4">
							<view class="nameInfo">
								<text>{{userName}}</text>
								<text style="width: 500rpx;margin-top: 10rpx;">实时：{{timeNow}}</text>
								<text style="font-size: 20rpx;margin-top: 5rpx;">数据筛选</text>
							</view>
						</u-col>
						<u-col span="6">
							<view class="icon" @click="chooseTime">
								<u-icon name="arrow-right" color="#fff" size="22"></u-icon>
							</view>
						</u-col>
					</u-row>
				</view>
			</image>

			<view class="totalChart">
				<image src="../../static/firstTitle.png" class="firstTitle">
					<image src="../../static/titleHd.png" class="titleHd"></image>
					<text class="firstTotal">总仓库数据</text>
				</image>
				<view class="firstChart">
					<view style="margin: 30rpx;width: 92%;">
						<qiun-data-charts type="column" :opts="opts" :canvas2d='true' :chartData="chartData" />
					</view>
				</view>
			</view>
			<view class="singleChart">
				<image src="../../static/singleTitle.png" class="firstTitle">
					<image src="../../static/titleHd.png" class="titleHd"></image>
					<text class="firstTotal">单仓库数据汇总</text>
				</image>
				<view class="firstChart" style="height: 600rpx;">
					<view class="wareHouse" style="margin-top: 25rpx;">
						<text :class="setTabsIndex==1?'active':''" @click="setTabs(1)">宁乡仓</text>
						<text :class="setTabsIndex==2?'active':''" @click="setTabs(2)">广东仓</text>
						<text :class="setTabsIndex==11?'active':''" @click="setTabs(11)">贵州仓</text>
						<text :class="setTabsIndex==5?'active':''" @click="setTabs(5)">云南仓</text>
						<text :class="setTabsIndex==7?'active':''" @click="setTabs(7)">河南仓</text>
						<text :class="setTabsIndex==10?'active':''" @click="setTabs(10)">重庆仓</text>
					</view>
					<view style="margin: 30rpx;width: 92%;">
						<qiun-data-charts type="area" :canvas2d='true' :opts="opts1" :chartData="chartData2" />
					</view>


				</view>
			</view>
		</view>
		<view>
			<u-popup :show="dataDialog" mode="top" @close="close" @open="openDataDialog" style="z-index: 1000000;">
				<view class="dataDialog">
					<view class="top">
						<text :class="chooseDateIndex==0?'active':''" @click="chooseDate(0)">常用周期</text>
						<text :class="chooseDateIndex==1?'active':''" @click="chooseDate(1)"
							style="margin-left: 20rpx;">选择日期</text>
					</view>
					<view v-if="chooseDateIndex==0">
						<view class="center">
							<view class="setCenterLis" :class="setBackgroundIndex=='today'?'setBack':''"
								@click="setBackground('today')">今日</view>
							<view class="setCenterLis" :class="setBackgroundIndex=='thisWeek'?'setBack':''"
								@click="setBackground('thisWeek')">本周</view>
							<view class="setCenterLis" :class="setBackgroundIndex=='thisMonth'?'setBack':''"
								@click="setBackground('thisMonth')">本月</view>
							<view class="setCenterLis" :class="setBackgroundIndex=='thisYear'?'setBack':''"
								@click="setBackground('thisYear')">本年</view>
						</view>
					</view>
					<view v-if="chooseDateIndex==1">
						<view class="timeConner">
							<view @click="chooseStart">{{startTime}}</view>
							<view>至</view>
							<view @click="chooseEnd">{{endTime}}</view>
						</view>
					</view>
					<view class="bottom" v-if="chooseDateIndex==1">
						<u-button size="small" style="width: 140rpx;" @click="dataDialog=false">取消</u-button>
						<u-button size="small" type="primary" style="width: 140rpx;" @click="getWxData">确认</u-button>
					</view>
				</view>

			</u-popup>
			<view>

				<u-datetime-picker :show="show" v-model="value1" mode="date" @confirm="confirm"></u-datetime-picker>
				<u-datetime-picker :show="show2" v-model="value2" mode="date" @confirm="confirm2"></u-datetime-picker>
			</view>
		</view>

	</view>

</template>

<script>
	import dayjs from 'dayjs';
	let app = getApp();
	export default {
		data() {
			return {
				color: app.globalData.defaultColor,
				dataDialog: false,
				saleTotalObject: {},
				warehouseId: 1,
				show: false,
				show2: false,
				value1: Number(new Date()),
				value2: Number(new Date()),
				setTabsIndex: 1,
				chooseDateIndex: 0,
				setBackgroundIndex: 'today',
				timeNow: "",
				startTime: "开始日期",
				endTime: "结束日期",
				userName: "",
				timeShow: false,
				mode: 'range',
				rangeTime: 10,
				minDateVal: new Date().getTime() - 30672000000,
				maxDateVal: new Date().getTime(),
				chartData: {},
				chartData2: {},
				opts: {
					color: [app.globalData.defaultColor],
					fontSize: 12,
					padding: [15, 15, 0, 5],
					enableScroll: false,
					legend: {},
					xAxis: {
						disabled: false,
						disableGrid: true,
						calibration: false,
						fontColor: app.globalData.defaultColor,
						axisLineColor: "#fff",
						fontColor: "#4F4F4F"
					},
					yAxis: {
						disabled: false,
						disableGrid: false,
						gridType: "dash",

						// showTitle:true,
						data: [{
							min: 0,
							title: "单位:(万)",
							axisLineColor: "#fff",
							// gridColor: "#13989A",
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#13989A",
							activeBgOpacity: 0.08,
							linearType: "opacity",
							barBorderCircle: true
						}
					}
				},
				opts1: {
					color: [app.globalData.defaultColor],
					fontSize: 12,
					padding: [15, 15, 0, 5],
					dataLabel: true,
					dataPointShape: false,
					legend: {},
					xAxis: {
						labelCount: 4, //默认显示个数
						rotateLabel: false,
						fontColor: app.globalData.defaultColor,
						marginTop: 10,
						axisLabel:{
							interval:2
						}
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						data: [{
							min: 0,
						}]
					},
					extra: {
						area: {
							label:true,
							type: "curve", // 区域图类型，可选值："straight"尖角折线模式,"curve"曲线圆滑模式,"step"时序图模式
							opacity: 0.1, // 	区域图透明度
							addLine: true, // 是否叠加相应的折线
							width: 2, // 叠加的折线宽度
							gradient: true, // 是否开启区域图渐变色
							activeType: "hollow", // 激活指示点类型，可选值："none"不启用激活指示点,"hollow"空心点模式,"solid"实心点模式
						},
					}
				}
			}
		},
		onLoad() {
			this.getTime()
			this.userName = uni.getStorageSync('userName');
			this.getWxData()

		},
		onShow() {

		},
		computed: {

		},
		methods: {
			setTabs(i) {
				this.setTabsIndex = i
				this.warehouseId = i
				this.getWxData()
			},
			back() {
				uni.switchTab({
					url: '/pages/mine/index'
				})
			},
			getTime() {
				var now = new Date();
				var year = now.getFullYear(); //得到年份
				var month = now.getMonth() + 1; //得到月份
				var date = now.getDate(); //得到日期
				this.timeNow = year + "年" + month + "月" + date + "日";
			},
			chooseTime() {
				this.dataDialog = true
			},
			confirmTime(e) {
				this.startTime = e[0]
				this.endTime = e[e.length - 1]
				this.timeShow = false
			},
			openDataDialog() {
				this.dataDialog = true
			},
			close() {
				this.dataDialog = false
			},
			chooseDate(e) {
				this.chooseDateIndex = e
			},
			setBackground(e) {
				this.setBackgroundIndex = e
				this.dataDialog = false
				this.dateType = e
				this.startTime = '开始日期'
				this.endTime = '结束日期'
				this.getWxData()
			},
			chooseStart() {
				this.show = true
			},
			chooseEnd() {
				this.show2 = true
			},
			confirm(e) {
				this.startTime = dayjs(e.value).format('YYYY-MM-DD');
				this.show = false
				this.dateType = ''
			},
			confirm2(e) {
				this.endTime = dayjs(e.value).format('YYYY-MM-DD')
				this.show2 = false
			},
			getWxData() {
				this.dataDialog=false
				let params = {
					warehouseId: this.warehouseId,
				}
				if (this.dateType) {
					 params = {
						warehouseId: this.warehouseId,
						dateType: this.dateType,
					}
				} else if (this.startTime != '开始日期') {
					 params = {
						warehouseId: this.warehouseId,
						startTime: this.startTime,
						endTime: this.endTime
					}
				} 
				uni.$u.http.get('/dataDetail/selectIndexData', {
					params: params
				}).then(res => {
					let list = {
						categories: res.saleAndDjTotalList.map(item => item.warehouseName),
						series: [{
							name: "单位:(万元)",
							data: res.saleAndDjTotalList.map(item => (item.saleProfit / 10000)
								.toFixed(2))
						}, ]
					};
					this.chartData = JSON.parse(JSON.stringify(list));
					
				})
				uni.$u.http.get('/dataDetail/selectSaleSevenData', {
					params: params
				}).then(res => {
					let list2 = {
						categories: res.saleSevenProfitList.map(item => item.dateDay),
						series: [{
							name: "单位:(万元)",
							data: res.saleSevenProfitList.map(item => (item.value/10000).toFixed(2))
						}]
					};
					this.chartData2 = JSON.parse(JSON.stringify(list2));
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.custom-navbar {
		position: relative;
		width: 100%;
		height: 400rpx;
	}

	.navbar-background {
		position: absolute;
		width: 100%;
		height: 400rpx;
		top: -200rpx;
		left: 0;
		z-index: 1;
	}

	.userInfo {
		position: absolute;
		top: 20rpx;
		left: 30rpx;
		z-index: 2;
	}

	.userPic {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.nameInfo {
		display: flex;
		flex-direction: column;
		color: #fff;
	}

	.icon {
		margin-left: 80rpx;
	}

	.totalChart {
		position: relative;
		z-index: 100;
		top: 160rpx;
	}

	.firstTitle {
		height: 80rpx;
		width: 100%;
		display: flex;
	}

	.titleHd {
		width: 50rpx;
		height: 50rpx;
		position: relative;
		top: -63rpx;
		left: 30rpx;

	}

	.firstTotal {
		font-size: 30rpx;
		color: black;
		position: relative;
		top: -75rpx;
		left: 45rpx;
		z-index: 100;
	}

	.firstChart {
		width: 100%;
		height: 500rpx;
		padding-top: 20rpx;
		margin-top: -60rpx;
		background: #fff;
		z-index: 100;
	}

	.singleChart {
		z-index: 100;
		margin-top: 170rpx;
		border-radius: 20rpx;
	}

	.wareHouse {
		font-size: 24rpx;
		color: #4F4F4F;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
	}

	.active {
		font-size: 30rpx;
		padding-bottom: 10rpx;
		color: #13989A;
		border-bottom: 5rpx solid #13989A;
		border-bottom-left-radius: 50% 50%;
		border-bottom-right-radius: 50% 50%;
	}

	.dataDialog {
		height: 550rpx;
	}

	.dialogText {}

	.top {
		color: #13989A;
		margin-top: 120rpx;
		margin-left: 60rpx;
		margin-bottom: 60rpx;
	}

	.setCenterLis {
		height: 80rpx;
		line-height: 80rpx;
		padding-left: 60rpx;
		width: 80%;
		margin-left: 45rpx;
	}

	.setBack {
		background: #E7F4F5;
	}

	.bottom {
		display: flex;
		justify-content: center;
		margin-top: 30rpx;
		padding-left: 120rpx;
		padding-right: 120rpx;

	}

	.timeConner {
		display: flex;
		background: #13989A;
		height: 80rpx;
		border-radius: 50rpx;
		margin-left: 50rpx;
		margin-top: 100rpx;
		margin-right: 50rpx;
		justify-content: space-evenly;
		color: #fff;
		align-items: center;
		border: 10rpx solid #D0EAEB;
	}
</style>